!!!
- year = [20, 21]
- semester = 1
%html
  %head
    %meta(charset="UTF-8")/
    %title 之江学院考试
    %link(rel="stylesheet" type="text/css" href="exam.css")/

  %body
    %h1 
      浙江工业大学之江学院20 #{year[0]} /20 #{year[1]} 学年
      %br/
      第 #{semester} 学期试卷

    %table.name(width="100%")
      %tr
        %td(colspan="2")  
          课程
          %span.filling2
        %td(colspan="2")
          班级
          %span.filling2
      %tr
        %td
          姓名
          %span.filling1
        %td(colspan="2")
          学号
          %span.filling2
        %td
          教师姓名
          %span.filling1

    %table.score(width="85%" border=1 rules="all")
      %tr
        %th 题序
        %td 一
        %td 二
        %td 三
        %td 四
        %td 五
        %td 总分
      %tr
        %th 计分
        %td
        %td
        %td
        %td
        %td
        %td
    %br/
    .page1
      %h2 填空题(40分)
      %ol
        %li
          HTML中常见的三种列表是：
          %span.filling
          、
          %span.filling
          、
          %span.filling
        %li
          根据显示形态，CSS把HTML标签 (元素) 分为：
          %span.filling
          、
          %span.filling
        %li
          %span.filling
          是和流动相对的概念。它不会破坏文档流，但是会影响显示效果。
        %li
          HTML代码
          %xmp.code <div><span class="head">你</span>若安好便是晴天</div>
          中, 标签
          %span.filling
          继承标签
          %span.filling
          的样式。
        %li
          若用ID名定位网页元素
          %xmp.code <p id="zzjc-motto" class="motto">尚德致知、敢为人先</p>
          则选择器为
          %span.filling
          。
        %li
          网页中图片的文字环绕效果是通过
          %span.filling
          实现的。
        %li
          子元素默认具有父元素设置的属性。这叫
          %span.filling
          。
        %li
          网页中每个元素根据
          %span.filling
          模型显示。说出一种方法，来观察盒子大小：
          %span.filling
          。
        %li
          CSS 代码应该写在标签
          %span.filling
          里，而引用外部css文件要写在标签
          %span.filling
          里。JavaScript 代码或者外部 JS 文件都应该写在标签
          %span.filling
          里。
        %li
          写出三种常用 DOM 节点：
          %span.filling
          、
          %span.filling
          、
          %span.filling
          。文档节点的变量名是
          %span.filling
          。
      %h2 判断题 (20分)
      %ol
        %li
          CSS 可以嵌入 HTML 文件，也可以写在独立的文件中。
          %span.parenthesis
            %span.yes_no
        %li
          超级链接默认具有下划线，而且这条下划线无法消除。
          %span.parenthesis
            %span.yes_no
        %li
          默认设置下，背景图片一般正好覆盖到盒模型的内边距部分。
          %span.parenthesis
            %span.yes_no
        %li
          JavaScript 和 CSS 都用 link 标签导入外部文件。
          %span.parenthesis
            %span.yes_no
        %li
          浮动时，子元素不会超出父元素的显示范围。如果父元素没有充足的空间，那么可能会发生形变。
          %span.parenthesis
            %span.yes_no
        %li
          浮动元素向左浮动时，会挤走同一行的所有非浮动元素。
          %span.parenthesis
            %span.yes_no
        %li
          列表中列表项总是独立成一段显示，说明列表项是块状元素。
          %span.parenthesis
            %span.yes_no
        %li
          网页中的每个盒子默认情况下都有浮动效果。
          %span.parenthesis
            %span.yes_no
        %li
          默认情况下，标签 body 中的JavaScript代码是在当前位置执行，但可以操作HTML任何已经加载好的元素。
          %span.parenthesis
            %span.yes_no
        %li
          DOM中的文本节点大体上和HTML的标签一一对应。
          %span.parenthesis
            %span.yes_no
    %footer
    %br/
    %header 浙江工业大学之江学院考试命题纸
    .page
      %h2 选择题(20分)
      %ol
        %li
          下面哪个标签书写是正确的？
          %span.parenthesis
            %span.choice
          %ol(type="A")
            %li 
              %xmp <div>Hello world<div>
            %li 
              %xmp <b>Hello world</b>
            %li 
              %xmp <br>Hello world<br/>
            %li 
              %xmp <span Hello world/>       
        %li
          CSS写法正确的是
          %span.parenthesis
            %span.choice
          %ol(type="A")
            %li 
              %xmp span color: red;
            %li 
              %xmp div span {text-align: center; float: left;}
            %li 
              %xmp div, span {font-size=2em color=red}
            %li 
              %xmp div>span {text-shadow:1px,1px,3px;}
        %li
          应用下述样式的效果为：
          %span.parenthesis
            %span.choice
          %xmp.code<
            p {color:blue;}
            span {font-size: large;
            font-weight: bold;}
            <p>
            <span>秦</span>时明月汉时关，万里长征人未还。但使龙城飞将在，不教胡马度阴山。
            </p>
          %ol(type="A")
            %li 
              %xmp 整首诗蓝色、加粗、放大
            %li 
              %xmp 整首诗蓝色，第一个字加粗、放大
            %li 
              %xmp 整首诗蓝色，第一个字加粗、放大但不是蓝色
            %li 
              %xmp 第一个字加粗、放大；其他字默认字体
        %li
          下面哪个选择器的声明语句无法影响“独”字？
          %span.parenthesis
            %span.choice
          %xmp.code<
            <div>
            <span class="title">九月九日忆山东兄弟[唐] 王维</span>
            <p>
            <span class="head">独</span>
            <span>在异乡为异客，每逢佳节倍思亲。遥知兄弟登高处，遍插茱萸少一人。</span>
            </p>
            </div>
          %ol(type="A")
            %li 
              %xmp div .head
            %li 
              %xmp p>span
            %li 
              %xmp div>span
            %li 
              %xmp .title, .head
        %li
          文本美化时, text-shadow 前三个代表大小的数值依次表示
          %span.parenthesis
            %span.choice
          %ol(type="A")
            %li 阴影在x轴，y轴，z轴上的偏移
            %li 阴影在x轴，y轴上的偏移，颜色编码
            %li RGB颜色编码的三个分量
            %li 阴影在x轴，y轴上的偏移，模糊程度
    %footer
    %br/
    %header 浙江工业大学之江学院考试命题纸
    .page
      %ol(start="6")
        %li
          经常逛淘宝的同学知道，不用点击菜单，只要鼠标滑过菜单时，
          就会显示一些隐藏的商品信息或高亮一些暗淡的文字。
          %br/
          这主要是通过什么实现的？
          %span.parenthesis
            %span.choice
          %ol(type="A")
            %li 设置text-decoration等文本修饰属性
            %li JavaScript动态特效
            %li CSS动画特效
            %li 设置鼠标悬停伪选择器
        %li
          B 站主页导航栏其实是一个无序列表。为什么这个无序列表不是纵向排列，而是横向排列？
          %span.parenthesis
            %span.choice
          %ol(type="A")
            %li CSS样式文件丢失
            %li 浮动效果
            %li B站服务器故障
            %li 浏览器故障
        %li
          这是一段HTML代码，已知第二副图被设置为向左浮动，下面说法正确的是
          %span.parenthesis
            %span.choice
          %xmp.code 文本0<img src="1.jpg">文本1<img src="2.jpg">文本2
          %ol(type="A")
            %li 第二副图会浮动到最左侧
            %li 第二副图会浮动到“文本1”的左侧，但不超过第一幅图
            %li 两幅图浮动到最左侧，但不改变两者顺序
            %li 两幅图浮动到最左侧，并交换顺序
        %li
          百度首页输入本文然后点击搜索，就能显示一系列相关网页。这种人机互动效果是用什么技术实现的？
          %span.parenthesis
            %span.choice
          %ol(type="A")
            %li CSS 布局
            %li 运行 JavaScript 脚本
            %li 注册 click 事件
            %li CSS 伪选择器+动画效果
        %li
          浏览器解析下面的HTML代码，会有什么特效
          %span.parenthesis
            %span.choice
          %xmp.code
            <h1>修改字母</h1>
            <span>A</span>

            <script type='text/javascript'>
            spans[0].innerText = 'B'
            spans = document.getElementsByTagName('span')
            function f(){
            spans[0].innerText = 'C'
            }
            span.onclick = function () {}
            </script>
          %ol(type="A")
            %li 有特效，鼠标点击字母A变成C
            %li 有特效，鼠标点击字母A变成B
            %li 没有特效，显示字母B
            %li 没有特效，显示两个字母AB

    %footer
    %br/
    %header 浙江工业大学之江学院考试命题纸
    .page
      %h2 简答题(20分)
      %ol
        %li
          用CSS，实现文本居中: 大标题居中，段落中第二行居中并设置蓝色。（6分）
          %xmp.code
            <h1 class="c">这是大标题</h1>
            <p>这是段落
            <span class="c">这是要居中的文本; 设置成蓝色<span>
            <span class="d">这是不要居中的文本; 默认显示<span>
            </p>
          .solve
            %xmp.code
              - (1..12).each do |i|
                = i
        %li 
          下面是一段文章。标题居中；第一个词放大到4倍，加粗，其余文字环绕。(8分)
          %xmp.code
            <article>
            <div class="title">荷塘月色</div>
            <address>朱自清</address>
            <p>
            <span class="moonlight">月光</span>如流水一般，静静地泻在这一片叶子和花上。
            薄薄的青雾浮起在荷塘里。
            叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。
            虽然是满月，天上却有一层淡淡的云，所以不能朗照；
            但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。
            月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；
            弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。
            塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。
            </p>
            </article>
          .solve
            %xmp.code
              - (1..15).each do |i|
                = i
    %footer
    %br/
    %header 浙江工业大学之江学院考试命题纸
    .page
      %ol(start="3")
        %li
          下面是之江学院首页导航栏列表（已经简化）。已知这个文档节点中第一个列表节点。怎样用 DOM 合理地把“本科教育”改为“学生风貌”？（6分）
          %xmp.code
            <ul>
            <li>学院概况</li>
            <li>院部设置</li>
            <li>师资队伍</li>
            <li>教学研究</li>
            <li>本科教育</li>
            <li>更多</li>
            </ul>

          .solve
            %xmp.code
              - (1..12).each do |i|
                = i
    %footer